<!-- PrintPreview.vue -->
<template>
  <div>
    <a-tabs tabPosition="top">
      <a-tab-pane v-for="(tab, index) in tabs" :key="index" :tab="tab.title">
        <div class="tab-pane-content">
          <iframe :src="getIframeSrc(tab)"></iframe>
        </div>
      </a-tab-pane>
      <!-- 其他tab页 -->
    </a-tabs>
  </div>
</template>


<script>
import { getAction } from '@api/manage'
import store from '@/store'

export default {
  name: 'PrintView',
  data() {
    return {
      id:'',
      serviceName:'',
      moduleName:'',
      tabs: [] // 用于存放从上一个页面传递过来的 tab 列表

    };
  }, created() {
    // 接收路由参数，假设参数名为 tabs
    if (this.$route.query.serviceName) {
      this.serviceName = this.$route.query.serviceName
      this.moduleName = this.$route.query.moduleName
      this.id=this.$route.query.id

      this.getPrintViewData(this.id,this.serviceName,this.moduleName)
    }
  },
  methods: {
    getPrintViewData(id,serviceName,moduleName) {
      console.log(serviceName)
      getAction(`/${moduleName}/${serviceName}/getPrintViewData/${id}`,).then(res=>{
        if (res.success){

this.tabs= res.result
        } else {

        }
      })
    },
    // 根据 tab 对象返回 iframe 的 src
    getIframeSrc(tab) {
      console.log(tab)
      let token = store.getters.token
      let templateStr =`${window._CONFIG['domianURL']}/jmreport/view/`;
      // 根据 tab 的内容动态生成 src 地址
      let returnStr = templateStr+tab.templateId+"?token="+token
// 检查 tab.data 是否存在并且是一个数组
      if (Array.isArray(tab.data)) {

        // 遍历 tab.data 中的每个对象
        tab.data.forEach((item) => {
          // 获取对象的每个键值对
          console.log('item'+item)
          Object.keys(item).forEach((key) => {
            let value = item[key];
            // 拼接到 returnStr 后面
            console.log('key='+key)
            console.log('value='+value)
            returnStr += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
            console.log('returnStr='+returnStr)
          });
        });
      }
      console.log('最终地址:'+returnStr)
return returnStr
    }
  }
}
</script>

<style scoped>
/* 可以添加一些样式 */
.tab-pane-content {
  width: 100%;
  height: calc(100vh - 60px); /* 如果有顶部导航栏，可以根据实际情况调整 */
  position: relative;
}
.tab-pane-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

